<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>The Perfect Fluid Width Layout</title>
	
	<link rel="stylesheet" type="text/css" href="style.css" />
	<link rel="stylesheet" type="text/css" href="menu.css" />
	<!--[if lt IE 7]>
		<link rel="stylesheet" type="text/css" href="style-ie.css" />
	<![endif]-->
</head>

<body>

	<div id="page-wrap">
		<div id="inside">
			
			<div id="header">
				<a href="#"><img id="logo" src="images/evis_logo.png" alt="header" /></a>
				<div></div>
				<div id="menu">
					<div class="right"></div>
					<div class="content">
						<ul class="css-menu">
							<li><a href="#">Menu Item 1</a></li>
							<li><a href="#"><span>Menu Item 2</span></a>
								<ul>
									<li><a href="#">Menu Item 2.1</a></li>
									<li><a href="#"><span>Menu Item 2.2</span></a>
										<ul>
											<li><a href="#">Menu Item 2.2.1</a></li>
										</ul>
									</li>
									<li><a href="#"><span>Menu Item 2.3</span></a>
										<ul>
											<li><a href="#">Menu Item 2.3.1</a></li>
											<li><a href="#"><span>Menu Item 2.3.2</span></a>
												<ul>
													<li><a href="#">Menu Item 2.3.2.1</a></li>
												</ul>
											</li>
										</ul>
									</li>
									<li><a href="#">Menu Item 2.4</a></li>
								</ul>
							</li>
							<li><a href="#">Menu Item 3</a></li>
						</ul>
					</div>
					<div class="left"></div>
				</div>
				<div class="clear"></div>
			</div>
	
			<div id="sidebar-top">
					<div class="right"></div>
					<div class="content"></div>
			</div>
			
			<div id="main-top">
					<div class="left"></div>
					<div class="content"></div>
			</div>
			
			<div class="clear"></div>
			
			<div id="main-wrap">
				<div id="sidebar">
					<h1>Sidebar Title 1</h1>
					<p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>
					
					<h1>Sidebar Title 2</h1>
					<p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>
					
					<h1>Sidebar Title 3</h1>
					<p>Ii putamus mutationem wisi laoreet eros. Quinta processus saepius facer consequat fiant. Adipiscing ea possim vulputate quarta quam. Molestie dolor sed suscipit quis qui. Et feugait claritatem soluta est duis. Mutationem augue typi dynamicus dolore placerat. Lius typi dynamicus gothica per futurum.</p>
	
				</div>
				
				<div id="main">
					<div id="content">
						<h1>Why is this layout "perfect"?</h1>
						
						<dl class="meta">
							<dt>Date</dt><dd>2010-12-20 18:00:00</dd>
							<dt>Author</dt><dd>Evi Song</dd>
							<dt>Tags</dt><dd class="tags"><ul>
								<li>Tag1</li>
								<li>Tag2</li>
							</ul></dd>
						</dl>
						
						<ul>
							<li>Works in all major browsers</li>
							<li><strong>Shrinks</strong> to 780px<br />This accomodates users with 800x600 resolution, with no horizontal scroll!</li>
							<li><strong>Grows</strong> to 1260px<br />This accomodates users with 1280x768 resolution and everything in between.</li>
							<li>This accomodates 90%+ of all internet users. You could easily make this layout grow larger, but be mindful of how line-length affects readability. Nobody wants to read a line of text 1980px long.</li>
							<li>The left sidebar is of "equal height" to the main content</li>
						</ul>
						
						<h2>Powered by EVIS Studio</h2>
						
						<p>
						Litterarum vero at tincidunt adipiscing vel. Dolore quod in lectores littera iis. Dolor lobortis sequitur nobis per soluta. Dignissim fiant diam option facer decima. Facilisis est in erat ullamcorper eodem. Mirum veniam quam luptatum ut anteposuerit. Commodo luptatum qui parum humanitatis lobortis. Molestie feugiat hendrerit dolor nam sed. Insitam feugait te wisi doming quam. Nostrud formas in augue dolore sit. 
						</p>
						
						<p>
						Hendrerit lectorum et notare legentis nulla. Habent clari commodo claram mazim magna. Vulputate nihil Investigationes sequitur humanitatis claritatem. Assum exerci molestie nobis feugait eodem. Aliquam delenit cum sed me veniam. Nunc eodem facilisi iis iriure commodo. Tempor typi illum velit consuetudium zzril. Tation liber claritas minim iis nobis. Claritatem placerat delenit iusto iis facilisis. Veniam tempor dolore congue mazim esse. 
						</p>
						
						<p>
						In possim luptatum seacula est claram. Legere molestie quinta nibh erat ut. Vel feugait nostrud commodo esse delenit. Amet elit lectorum dolor vel blandit. Velit qui est tation legere at. Notare tincidunt te dynamicus in legere. Liber typi dynamicus legunt nulla est. Nunc option quod est formas legere. Dynamicus accumsan mutationem quinta in iis. Quis quam facilisis iusto eodem possim. 
						</p>
						
						<p>
						Ut in dignissim iriure dolore feugiat. Claritas ut non anteposuerit te vero. Et facit amet at vero sequitur. Eros exerci non et ut facilisis. Suscipit consectetuer accumsan quam nonummy illum. Ullamcorper ea legunt volutpat me consuetudium. Qui littera nonummy delenit modo eorum. Facilisi hendrerit et typi lorem non. Tempor doming in iriure facit eleifend. Ii magna consectetuer consuetudium qui adipiscing. 
						</p>
						
						<p>
						Videntur wisi dolore parum quinta in. Te in aliquip nihil dynamicus gothica. Nunc possim legunt molestie modo wisi. In zzril vero zzril dolore augue. Facilisi lectores nihil exerci doming demonstraverunt. Typi qui sequitur notare modo magna. Accumsan facer Investigationes qui eum fiant. Me habent cum est eu feugait.
						</p>
						
						<div class="postscript">
							<div class="comments-count"><span>1</span> comments</div>
							<div class="links1">
								<div>Stars</div>
								<div>AddTo</div>
							</div>
							<div class="links2">
								<div><a href="#">Category1</a> | <a href="#">Category2</a> | <a href="#">Category3</a></div>
								<div><a href="#">Link</a> | <a href="#">Edit</a> | <a href="#">Delete</a></div>
							</div>
							
							<div class="clear"></div>
						</div>
					</div>
				</div>
			
				<div class="clear"></div>
			</div>

			<div id="sidebar-bottom">
					<div class="right"></div>
					<div class="content"><div class="left"></div></div>
			</div>
			
			<div id="main-bottom">
					<div class="left"></div>
					<div class="content"></div>
			</div>
			
			<div class="clear"></div>
			
			<div id="footer">
				<p>Footer stuff.</p>
			</div>
		
		</div>
		
		<div style="clear: both;"></div>
	
	</div>

</body>

</html>